<template>
	<view class="content">
		<template v-if="type === 'success'">
			<view class="icon-wrap icon-wrap-g">
				<u-icon size="40" name="checkmark" color="#18CA68"></u-icon>
			</view>
			<view class="result">报名成功！</view>
			<view class="result-desc" v-if="money > 0">中签后请及时完成支付，否则失去参赛资格！</view>
			<view class="result-desc" v-else>请注意及时关注赛事相关信息！</view>
			<navigator hover-class="none" class="btn" open-type="redirect" :url="`/pagesA/my/order/list`">
				查看报名
			</navigator>
			<navigator
				hover-class="none"
				class="btn btn-grey"
				open-type="reLaunch"
				url="/pages/index/index"
			>
				返回首页
			</navigator>
		</template>
		<template v-else>
			<view class="icon-wrap">
				<u-icon size="40" name="close" color="#EA3D3D"></u-icon>
			</view>
			<view class="result" style="margin-bottom: 160rpx">支付失败</view>
			<navigator
				hover-class="none"
				class="btn btn-grey"
				open-type="redirect"
				url="/pagesA/my/order/list"
			>
				查看订单
			</navigator>
		</template>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			type: '',
			id: '',
			money: ''
		}
	},
	onLoad(options) {
		this.money = options.money || 0
		this.type = options.type
		this.id = options.id
		if (this.type === 'success') {
			app.globalData.signInfo = {}
		}
	}
}
</script>

<style lang="scss" scoped>
.icon-wrap {
	width: 160rpx;
	height: 160rpx;
	background-color: #fcebeb;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 160rpx auto 24rpx;
}
.icon-wrap-g {
	background-color: #e7f9ef;
}
.result {
	font-size: 40rpx;
	color: #222;
	font-weight: 600;
	text-align: center;
	margin-bottom: 30rpx;
	&-desc {
		width: 80%;
		margin: 0 auto 110rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #666;
	}
}
.btn {
	width: 510rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #1e74f3;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #fff;
	margin: 0 auto 30rpx;
	&-grey {
		background-color: #eff2f3;
		color: #222;
	}
}
</style>
<style>
page {
	background-color: #fff;
}
</style>
